<template>
  <view class="goods">
    <view class="goods-list" v-if="goodsList.length > 0">
      <view class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item)">
        <!-- 收藏 -->
        <view class="goods-item-collect" @click.stop="collectFun(item)">
          <image :src="item.is_collect === 1
            ? '/static/images/collect-s.png'
            : '/static/images/collect.png'
            " mode="widthFix" />
        </view>
        <!-- 标签 左侧 -->
        <view class="goods-item-tag" v-if="item.is_recommend"> 推荐 </view>
        <view class="goods-item-tag" v-if="item.is_hot"> 热卖 </view>
        <!-- 图片 -->
        <view class="goods-item-img">
          <image :src="item.cover" mode="widthFix" />
        </view>
        <view class="goods-item-info">
          <view class="goods-item-info-name">{{ item.name }}</view>
          <view class="goods-item-info-brand">品牌：{{ item.brand_name }}</view>
          <view class="flex align-center" style="justify-content: space-between">
            <view class="goods-item-info-stock">可售：{{ item.stock }}</view>
            <view class="goods-item-info-price">
              <text class="unit">￥</text>
              <text>{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="goods-list" v-else>
      <view class="goods-empty"> {{ isLoad ? '加载中...' : emptyText }} </view>
      <view @click="goGuang()" class="goods-empty-button" v-if="!isLoad">去逛逛</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GoodsList',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    isLoad: {
      type: Boolean,
      default: true, // 是否加载中
    },

    emptyText: {
      type: String,
      default: '很抱歉，没有找到您要搜索的内容',
    },
  },
  components: {},
  data() {
    return {
      goodsList: [],
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.goodsList = newVal
      },
      deep: true,
    },
  },
  mounted() { },
  methods: {
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${item.id}`,
      })
    },
    goGuang() {
      uni.reLaunch({
        url: '/pages/home/index',
      })
    },
    collectFun(item) {
      //
      this.$api.collect({ product_id: item.id }).then((res) => {
        if (res.code === 0) {
          uni.showToast({
            title: item.is_collect === 1 ? '取消成功' : '收藏成功',
            icon: 'success',
          })
          this.goodsList = this.goodsList.map((it) => {
            if (it.id === item.id) {
              it.is_collect = item.is_collect === 1 ? 0 : 1
            }
            return it
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.goods {
  display: flex;
  flex-direction: column;

  .goods-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .goods-empty {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #545454;
    margin-top: 270rpx;
    font-weight: 500;
  }

  .goods-empty-button {
    margin: 0 auto;
    margin-top: 60rpx;
    font-size: 30rpx;
    width: 360rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #c9a063;
    color: #ffffff;

  }

  .goods-item {
    width: calc(50% - 12rpx);
    overflow: hidden;
    margin-bottom: 20rpx;
    position: relative;

    &-collect {
      position: absolute;
      top: 0;
      right: 0;
      width: 50rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;

      image {
        width: 28rpx;
        height: 28rpx;
      }
    }

    &-tag {
      position: absolute;
      top: 14rpx;
      font-size: 20rpx;
      line-height: 28rpx;
      color: #fff;
      left: 10rpx;
      z-index: 1;
      background-color: var(--main-color);
      border-radius: 2rpx;
      padding: 4rpx 8rpx;
    }

    .goods-item-img {
      width: 100%;
      height: 233rpx;
      overflow: hidden;
      border-radius: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-item-info {
      width: 100%;
      height: 100%;

      &-name {
        font-size: 22rpx;
        margin-top: 10rpx;
        color: #545454;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

      &-brand {
        font-size: 20rpx;
        color: #545454;
      }

      &-stock {
        font-size: 20rpx;
        color: #545454;
      }

      &-price {
        font-size: 22rpx;
        color: #545454;
        font-weight: bold;

        .unit {
          font-size: 20rpx;
          color: #545454;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
